<template>
  <div class="swiperBox">
    <div style="margin-top:115px;height:100%;">
      <el-carousel
        ref="carousel"
        height="377px"
        indicator-position="none"
        :initial-index="activeIndex"
        :autoplay="false"
        arrow="never"
        @change="changeClick"
      >
        <el-carousel-item v-for="(list, index1) in swiperlist" :key="index1">
          <div class="warp">
            <div
              v-for="(item, index) in list.listData"
              :key="index"
              class="first_block pointer"
              :class="{ firsthover: item.active }"
              @mouseover="selectStyle(item, index)"
              @click="linkToHjAnchorDetail(item)"
            >
              <div class="first_block_left">
                <img
                  :src="item.headerImage"
                  alt=""
                  style="width:120px;height:120px;border-radius:60px;margin-left:23px;"
                >
                <img class="icon" :src="item.anchorGrade | anchorIcon" alt="">
                <div class="block_left_name ellipsis">
                  {{ item.anchorName }}
                </div>
                <div class="grade">
                  <img
                    class="imgPosition"
                    :src="item.platformType | platformType"
                    alt=""
                  >
                  <div style="color: #FF580A;padding: 3px 0">
                    {{ item.anchorScore | strDataFil }}分
                  </div>
                  <div style="padding: 3px 0"><i class="iconfont icon-yijingrenzheng" />已认证</div>
                </div>
                <div class="food_btn">
                  <div class="left_btn">
                    {{
                      (item.goodCategory && item.goodCategory.split(',')[0]) ||
                        '--'
                    }}
                  </div>
                  <div class="rught_btn">
                    {{
                      (item.goodCategory && item.goodCategory.split(',')[1]) ||
                        '--'
                    }}
                  </div>
                </div>
                <!-- <div class="sign_up" @click.stop="$isBusinessUserJur(toSignup)">
                  立即报名
                </div> -->
                <LoginDialog :title="'立即报名'" :swiper="true" :path-name="pathName" :path-data="pathData" />
              </div>
              <div class="first_block_right">
                <div class="fans fans1">
                  <div class="fans_tit">粉丝数</div>
                  <div
                    class="fans_num"
                    v-html="$options.filters.f_number(item.fansNum, 1)"
                  >
                    {{ item.fansNum | f_number(1) }}
                  </div>
                </div>
                <div class="fans fans2">
                  <div class="fans_tit">近30天销量</div>
                  <div
                    class="fans_num"
                    v-html="$options.filters.f_number(item.totalSaleAmount, 2)"
                  >
                    {{ item.totalSaleAmount | f_number(2) }}
                  </div>
                </div>
                <div class="fans fans3">
                  <div class="fans_tit">近30天销售额</div>
                  <div
                    class="fans_num"
                    v-html="
                      $options.filters.f_number(item.totalSaleVolume, 1, {
                        fen: true
                      })
                    "
                  >
                    {{ item.totalSaleVolume | f_number(1, { fen: true }) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="swiperBox_left" @click="prev">
      <img
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/left.png"
        alt=""
        style="width:30px;height:30px"
      >
    </div>
    <div class="swiperBox_right" @click="next">
      <img
        src="https://kunheng-web-static.oss-cn-hangzhou.aliyuncs.com/xccimg/right.png"
        alt=""
        style="width:30px;height:30px"
      >
    </div>
    <!-- <div class="porint">
      <div @click="prev">
        <img
          src="@/assets/images/hongji/anchorTab/sall_right.png"
          alt=""
          style="width:15.33px;height:12.93px"
        />
      </div>
      <div class="xiaodian">
        <div
          v-for="(it, index) in 2"
          :key="index"
          :class="{ active: iconIndex === index }"
        ></div>
      </div>
      <div @click="next">
        <img
          src="@/assets/images/hongji/anchorTab/small_left.png"
          alt=""
          style="width:15.33px;height:12.93px"
        />
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  filters: {
    f_number(val, tags = 0, { fen = false, str = '' } = {}) {
      let num = val
      if (typeof val !== 'number') {
        num = Number(val)
        if (isNaN(num)) {
          return '--'
        }
      }
      if (val === -1) {
        return '--'
      }
      if (fen) {
        num = num / 100
      }
      const moneyUnits = ['', 'w', '亿', '万亿']
      const dividend = 10000
      let curentNum = num
      let curentUnit = moneyUnits[0]
      for (let i = 0; i < 4; i++) {
        curentUnit = moneyUnits[i]
        const stringNum = curentNum.toString()
        const index = stringNum.indexOf('.')
        let newNum = stringNum
        if (index !== -1) {
          newNum = stringNum.substring(0, index)
        }
        const curData = newNum.length
        if (curData < 5) {
          break
        }
        curentNum = curentNum / dividend
      }
      const m = {
        num: 0,
        unit: ''
      }
      m.num = curentNum.toFixed(tags)
      m.unit = curentUnit
      if (m.unit !== '亿') {
        return curentUnit
          ? '<span>' + m.num + m.unit + str + '</span>'
          : '<span>' + m.num + m.unit + '</span>'
      } else {
        return (
          '<span>' +
          m.num +
          "<span style='font-size: 20px'>" +
          m.unit +
          '</span></span>'
        )
      }
    }
  },
  data() {
    return {
      activeIndex: 0,
      iconIndex: 0,
      itemIndex: 0,
      active: false,
      swiperlist: [],
      pathName: 'hjAnchorSignUp',
      pathData: {
        anchorId: null,
        platformType: null
      }
    }
  },
  mounted() {
    // this.swiper.slideTo(3, 1000, false)
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$home
        .homeRecommendAnc({
          size: 12
        })
        .then(({ data }) => {
          const swiperlist = data
          const newData = JSON.parse(JSON.stringify(data))
          this.swiperlist = [
            { listData: swiperlist.splice(0, 4) },
            { listData: newData.splice(4, 4) },
            { listData: newData.slice(4, 8) }
          ]
          this.selectStyle(this.swiperlist[0].listData[0], 0)
        })
    },
    changeClick(v) {
      this.iconIndex = v
      this.selectStyle(this.swiperlist[v].listData[0], 0)
    },
    prev() {
      this.$refs.carousel.prev()
    },
    next() {
      this.$refs.carousel.next()
    },
    selectStyle(item, idx) {
      this.itemIndex = idx
      const _this = this
      this.pathData = {
        anchorId: item.anchorId,
        platformType: item.platformType
      }
      this.$nextTick(function() {
        this.swiperlist[this.iconIndex].listData.forEach(function(
          it
        ) {
          _this.$set(it, 'active', false)
        })
        this.$set(item, 'active', true)
      })
    },
    // 跳主播详情
    linkToHjAnchorDetail(item) {
      const url = this.$router.resolve({
        name: 'hjAnchorDataDetail',
        params: {
          anchorId: item.anchorId,
          platformType: item.platformType
        }
      })
      window.open(url.href, '_blank')
    }
  }
}
</script>
<style scoped lang="scss">
.xiaodian {
  // background-color: #333333 !important;
  // width: 6px;
  // height: 6px;
  // border-radius: 6px;
  height: 16px;
  display: flex;
  align-items: center;
  margin: -1px 10px 0;
  & > div {
    background: rgb(196, 196, 196);
    width: 6px;
    height: 6px;
    border-radius: 6px;
    margin: 0 5px;
    &.active {
      background: #333;
    }
  }
}
.swiperBox {
  position: relative;
  margin-top: 10px;
  height: 413px;
  &_left {
    position: absolute;
    left: 0;
    top: 170px;
    z-index: 200;
  }
  &_right {
    position: absolute;
    right: 0;
    top: 170px;
    z-index: 200;
  }
  .porint {
    position: absolute;
    right: 54px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    width: 100px;
  }
}
.icon {
  position: absolute;
  width: 44px;
  height: 25px;
  right: 51px;
  top: 122px;
}
.imgPosition {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.warp {
  width: 1140px;
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin-top: 21px;
  margin-left: 45px;
  .first_block {
    width: 216px;
    height: 337px;
    background-color: #fff;
    box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.07);
    transition: all 0.3s;
    // -moz-transition: all 2s; /* Firefox 4 */
    // -webkit-transition: all 2s; /* Safari and Chrome */
    // -o-transition: all 2s; /* Opera */
    overflow: hidden;
    position: relative;
    .first_block_left {
      width: 216px;
      height: 341px;
      padding: 27px 22px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      border-radius: 6px;
    }
    .first_block_right {
      width: 192px;
      height: 341px;
      padding-left: 30px;
      position: absolute;
      left: 200px;
      top: 0;
      z-index: 1;
      opacity: 0;
      transition: all 0.3s;
    }
    .block_left_name {
      width: 172px;
      font-size: 20px;
      color: #333;
      font-weight: 500;
      font-family: PingFangSC-Medium, PingFangSC;
      text-align: center;
      margin-top: 15px;
    }
    .grade {
      display: flex;
      text-align: center;
      height: 36px;
      font-size: 16px;
      justify-content: space-between;
      padding: 14px 12px 0 12px;
      color: #ff4909;
    }
    .food_btn {
      display: flex;
      text-align: center;
      margin-bottom: 20px;
      justify-content: space-between;
      padding: 15px 7px 0 7px;
      .left_btn {
        width: 66px;
        height: 24px;
        background: #fff0e8;
        border-radius: 12px;
        color: #ff580a;
        font-size: 12px;
        line-height: 24px;
      }
      .rught_btn {
        width: 66px;
        height: 24px;
        background: #ffeaed;
        border-radius: 12px;
        color: #ff0929;
        font-size: 12px;
        line-height: 24px;
      }
    }
    .sign_up {
      width: 172px;
      height: 30px;
      border-radius: 17px;
      border: 2px solid #ff0929;
      font-size: 14px;
      line-height: 1;
      padding: 6px 0;
      font-weight: 500;
      text-align: center;
      color: #ff0929;
      font-family: PingFangSC-Medium, PingFangSC;
    }
  }
  .first_block:hover {
    width: 408px;
    .first_block_right {
      left: 216px;
      opacity: 1;
    }
  }
  .firsthover {
    width: 408px;
    box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
    .first_block_right {
      left: 216px;
      opacity: 1;
    }
    .fans {
      margin-left: 0 !important;
      opacity: 0;
    }
    .fans1 {
      opacity: 0;
      transition: all 0.3s 0.1s;
    }
    .fans2 {
      opacity: 0;
      transition: all 0.3s 0.2s;
    }
    .fans3 {
      opacity: 0;
      transition: all 0.3s 0.3s;
    }
  }

  .first_block_right {
    padding: 52px 0 52px 0;
    line-height: 1;
    .fans {
      margin-bottom: 34px;
      margin-left: -48px;
      opacity: 1;
      .fans1 {
        opacity: 1;
      }
      .fans2 {
        opacity: 1;
      }
      .fans3 {
        opacity: 1;
      }
      .fans_tit {
        font-size: 18px;
        color: #666666;
      }
      .fans_num {
        margin-top: 6px;
        font-size: 30px;
        color: #333;
        font-weight: 500;
        font-family: DIN-Bold, DIN;
      }
    }
  }
}
</style>
